<template>
  <app-dialog-form
    :title="props.item ? '编辑分类' : '添加分类'"
    :confirm="handleSubmit"
    @closed="handleDialogClosed"
    @open="handleDialogOpen"
  >
    <el-form
      ref="form"
      :model="formData"
      :rules="formRules"
      label-width="100px"
    >
      <el-form-item
        label="分类名称"
        prop="title"
      >
        <el-input
          v-model="formData.title"
          placeholder="请输入分类名称"
        />
      </el-form-item>
      <el-form-item
        label="分类简介"
        prop="intr"
      >
        <el-input
          v-model="formData.intr"
          type="textarea"
          placeholder="请输入分类分类简介"
        />
      </el-form-item>
      <el-form-item
        label="分类图片"
        prop="image"
      >
        <el-upload
          class="avatar-uploader"
          action="xxx"
          :limit="1"
          :http-request="handleUpload"
          :show-file-list="false"
        >
          <img
            v-if="formData.image"
            :src="formData.image"
            class="avatar"
          >
          <el-icon
            v-else
            class="avatar-uploader-icon"
          >
            <plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item
        label="排序"
        prop="sort"
      >
        <el-input v-model.number="formData.sort" />
      </el-form-item>
      <el-form-item
        label="状态"
        prop="status"
      >
        <el-radio-group v-model="formData.status">
          <el-radio
            :label="1"
          >
            显示
          </el-radio>
          <el-radio
            :label="0"
          >
            隐藏
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </app-dialog-form>
</template>

<script lang="ts" setup>
import { Plus } from '@element-plus/icons'
import { nextTick, ref } from 'vue'
import type { PropType } from 'vue'
import type { IElForm, IFormRule } from '@/types/element-plus'
import { ElMessage } from 'element-plus'
import { postArticleCategory, putArticleCategory } from '@/api/article'
import { ArticleCategory, ArticleCategoryForm } from '@/api/types/article'
import { uploadImg } from '@/api/file'

const props = defineProps({
  item: {
    type: Object as PropType<ArticleCategory | null>,
    default: null
  }
})

interface EmitsType {
  (e: 'update:item', value: ArticleCategory | null): void
  (e: 'success'): void
}

const emit = defineEmits<EmitsType>()

const form = ref<IElForm | null>(null)
const formData = ref<ArticleCategoryForm>({
  title: '',
  status: 1,
  intr: '',
  sort: 0,
  image: ''
})

const formRules: IFormRule = {
  title: [
    { required: true, message: '请输入分类名称', trigger: 'blur' }
  ],
  intr: [
    { required: true, message: '请选择分类简介', trigger: 'change' }
  ]
}

const handleDialogOpen = async () => {
  nextTick(() => {
    if (props.item) {
      formData.value = {
        title: props.item.title,
        status: props.item.status as 0 | 1,
        sort: props.item.sort || 0,
        image: props.item.image,
        intr: props.item.intr
      }
    }
  })
}

const handleDialogClosed = () => {
  emit('update:item', null)
  form.value?.clearValidate() // 清除验证结果
  form.value?.resetFields() // 清除表单数据
}

const handleSubmit = async () => {
  const valid = await form.value?.validate()
  if (!valid) {
    return
  }
  props.item
    ? await putArticleCategory({
      ...formData.value,
      id: props.item.id
    }, props.item.id)
    : await postArticleCategory(formData.value)
  emit('success')
  ElMessage.success('保存成功')
}

const handleUpload = async ({ file }: { file: File }) => {
  console.log(file)
  await uploadImg({
    file
  })
}

</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
:deep(.avatar-uploader .el-upload:hover) {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 55px;
  height: 55px;
  text-align: center;
}
:deep(.avatar-uploader-icon svg) {
  margin-top: 14px; /* (178px - 28px) / 2 - 1px */
}
.avatar {
  width: 55px;
  height: 55px;
  display: block;
}
</style>
